<template>
    <div>
        <Top text="修改收货地址"/>
        <div class="table">
            <Input 
                text="联系人" 
                type="text" 
                placeholder='请输入姓名'
                :value="$route.query.item.name"
                @getInfo="(name) => (this.name = name)"
            />
            <Input 
                text="手机号码" 
                type="text" 
                placeholder='请输入手机号码'
                :value="$route.query.item.phone"
                @getInfo="(phone) => (this.phone = phone)"
            />
            <Input 
                text="详细地址" 
                type="text" 
                placeholder='请输入详细地址'
                :value="$route.query.item.address"
                @getInfo="(address) => (this.address = address)"
            />
            <CheckBox
                text='设为默认地址'
                :value="$route.query.item.isDefaul"
                @getVal="(isDefaul) => (this.isDefaul = isDefaul)"
            />
        </div>
        <SubmitBtn 
            text="确认修改" 
            @click.native="updateAddress($route.query.item)"
        />

        <Tip v-show="tips.isTips" :tipsText="tips.text"/>
    </div>
</template>

<script>
    import SubmitBtn from '@/views/Location/SubmitBtn'
    import CheckBox from '@/views/Location/checkBox'
    import Input from '@/views/Location/Input'
    import {mapState} from 'vuex'
    export default {
        name:"UpdateLocation-Location",
        components:{Input, SubmitBtn, CheckBox},
        data(){
            return {
                name:"",
                phone:"",
                address:"",
                isDefaul:false
            }
        },
        computed:{
            ...mapState('About',['tips'])
        },
        methods: {
            updateAddress(item){
                const address = {
                    _id : item._id,
                    name : this.name || item.name,
                    phone : this.phone || item.phone,
                    address : this.address || item.address,
                    isDefaul : this.isDefaul 
                }
                this.$store.dispatch('About/updateAddress',address)
            }
        },
    }
</script>

<style scoped lang="less">
    .table{
        padding: 10px 0 20px 0;
    }
</style>